<template>
  <layout
    class="container"
    :appHeader="{ title: $route.name }"
    style="padding:0 20rpx;"
  >
    <scroll-view
      :class="display === 'pc' ? 'pc-product-list' : 'product-list'"
      scroll-y="true"
    >
      <view
        v-for="(item, productIndex) in productList"
        :key="productIndex"
        class="product-item-container"
      >
        <view class="header">
          <view class="left">
            <view class="product-name">{{ item.productName }}</view>
          </view>
          <!-- <image
            class="cover-image"
            :src="item.coverImage"
            mode="scaleToFill"
          /> -->
        </view>
        <view class="body">
          <view class="overview">
            <view
              class="row"
              v-for="(statistic, index) in item.statistic"
              :key="index"
            >
              <view class="label" v-if="showName(productIndex)">{{ statistic.desc }}: </view>
              <view class="value">{{ statistic.value }}</view>
            </view>
          </view>
        </view>
        <!-- <view class="footer">
          <view class="feature-wrapper">
            <view class="feature" v-for="(feature, index) in item.features" key="index">{{feature}}</view>
          </view>
          <button class="detail-button">查询</button>
        </view> -->
      </view>
    </scroll-view>
    <view :class="display === 'pc' ? 'pc-radar-chart-wrapper' : 'radar-chart-wrapper'" class="">
      <canvas
        canvas-id="canvasRadar"
        id="canvasRadar"
        class="charts"
        @touchstart="touchRadar"
      ></canvas>
    </view>
  </layout>
</template>
<script>
import Index from './index';

export default Index;
</script>
<style lang="scss" scoped>
@import 'index';
</style>
